<template>
  <div class="add-node-btn-box">
    <div class="add-node-btn">
      <el-popover ref="popoverRef" v-model="visible" placement="right-start">
        <div class="add-node-popover-body">
          <div class="add-node-popover-item" @click="addType(0)">
            <div class="add-node-item-wrap"><img :src="auditIcon" class="add-node-img" alt=""></div>
            <div class="label">审批</div>
          </div>
          <div class="add-node-popover-item" @click="addType(3)">
            <div class="add-node-item-wrap"><img :src="senderIcon" class="add-node-img" alt=""></div>
            <div class="label">抄送</div>
          </div>
          <div class="add-node-popover-item" @click="addType(1)">
            <div class="add-node-item-wrap"><img :src="conditionIcon" class="add-node-img" alt=""></div>
            <div class="label">条件</div>
          </div>
          <div class="add-node-popover-item" @click="addType(0, true)">
            <div class="add-node-item-wrap"><img :src="addSignerIcon" class="add-node-img" alt=""></div>
            <div class="label">加签</div>
          </div>
          <div v-if="processType && processType() === FIXED_PROCESS_TYPE.PAYMENT_APPLY" class="add-node-popover-item" @click="addType(4)">
            <div class="add-node-item-wrap"><img :src="flyIcon" class="add-node-img" alt=""></div>
            <div class="label">飞来通告审批</div>
          </div>
          <div v-if="showPasteNode" class="add-node-popover-item" @click="pasteNode">
            <div class="add-node-item-wrap">
              <img :src="pasteIcon" class="add-node-img" style="width: 22px; height: 22px">
            </div>
            <div class="label">粘贴节点</div>
          </div>
        </div>
        <div slot="reference" :class="{'active': visible}" class="btn move-disabled"><i class="el-icon-plus icon"/></div>
      </el-popover>
    </div>
  </div>
</template>
<script>
import conditionIcon from '@/assets/legalProcess/conditionIcon.png';
import auditIcon from '@/assets/legalProcess/auditIcon.png';
import senderIcon from '@/assets/legalProcess/senderIcon.png';
import pasteIcon from '@/assets/legalProcess/paste.png';
import flyIcon from '@/assets/legalProcess/flyIcon.png';
import addSignerIcon from '@/assets/legalProcess/addSignerIcon.png';
import { mapState } from 'vuex';
import { createIntTypeNumber } from '@/utils/tools';
import { FIXED_PROCESS_TYPE } from '@/utils/const/process';

export default {
  model: {
    prop: 'processTree',
    event: 'changeProcesss'
  },
  inject: {
    processType: {
      default: null
    }
  },
  props: {
    processTree: {
      type: Object,
      default: () => ({})
    },
    isCondition: { // 是否在循环分支中
      type: Boolean,
      default: false
    },
    parentId: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      FIXED_PROCESS_TYPE,
      conditionIcon, senderIcon, auditIcon, pasteIcon, flyIcon, addSignerIcon,
      visible: false
    };
  },
  computed: {
    ...mapState({
      'clipboardNode': state => state.process.clipboardNode
    }),
    showPasteNode() {
      if (!this.clipboardNode || !this.clipboardNode.node) {
        return false;
      }
      // 若复制/剪切的是条件节点，不可粘贴至条件节点中
      if (this.isCondition && this.clipboardNode.isConditionNode) {
        const allKeys = [];
        const { node } = this.clipboardNode;
        node && this.getAllClipboardNodeKeys(node, allKeys);
        return !allKeys.includes(this.parentId);
      }
      return true;
    }
  },
  methods: {
    // 获取当前复制/剪切条件节点内部的所有节点id
    getAllClipboardNodeKeys(node, allKeys) {
      node.id && allKeys.push(node.id);
      if (node.conditionNodes && Array.isArray(node.conditionNodes)) {
        node.conditionNodes.forEach(conditionNode => {
          this.getAllClipboardNodeKeys(conditionNode, allKeys);
        });
      }
      node.childNode && this.getAllClipboardNodeKeys(node.childNode, allKeys);
    },
    addType(type, setCountersign = false) {
      // 节点类型 0: 审批人节点  1: 条件分支  2: 条件子节点  3:抄送节点 4: 飞来通告审批节点 5: 加签节点
      this.visible = false;
      let data = {
        nodeName: '',
        nodeType: type,
        examineRoles: [],
        childNode: this.processTree,
        roleRelation: 0,
        isRequire: 0,
        isRepealLock: 0,
        isRecall: 0,
        isRemark: 0,
        isAttachment: 0,
        isCountersign: setCountersign ? 1 : 0,
        isRichText: 1,
        isRestrictAutoApprove: 0,
        isPassedRequired: 0,
        allowCloseProcess: 0,
        isRejectRequired: 0,
        id: createIntTypeNumber(),
        isRedirectTimeOut: 0,
        isOpenTimeOut: 0,
        canModifyForm: 0,
        creatorAutoPass: 0
      };
      switch (type) {
        case 0:
          data.nodeName = '审批';
          break;
        case 1:
          data = {
            nodeName: '条件节点',
            nodeType: type,
            childNode: this.processTree,
            conditionNodes: [{
              nodeName: '条件1',
              nodeType: 2,
              conditionList: {
                priority: 1,
                rule: 0,
                list: []
              },
              id: createIntTypeNumber()
            }, {
              nodeName: '条件2',
              nodeType: 2,
              conditionList: {
                priority: 2,
                rule: 0,
                list: []
              },
              id: createIntTypeNumber()
            }],
            id: createIntTypeNumber()
          };
          break;
        case 3:
          data.nodeName = '抄送';
          break;
        case 4:
          data.nodeName = '飞来通告审批';
          break;
        case 5:
          data.nodeName = '加签';
          data.isCountersign = 1;
          break;
      }
      this.$emit('changeProcesss', data);
    },
    pasteNode() {
      this.visible = false;
      const node = _.cloneDeep(this.clipboardNode.node);
      this.setAllClipboardNodeId(node);
      node.childNode = this.processTree;
      this.$emit('changeProcesss', node);
      this.$nextTick(() => {
        !this.clipboardNode.isCopy && this.$store.dispatch('changeNodePasteStatus', true);
        this.$message.success('粘贴成功');
      });
    },
    // 重置截切板的所有节点id
    setAllClipboardNodeId(node) {
      node.id = createIntTypeNumber();
      if (node.conditionNodes && Array.isArray(node.conditionNodes)) {
        node.conditionNodes.forEach(conditionNode => {
          this.setAllClipboardNodeId(conditionNode);
        });
      }
      node.childNode && Object.keys(node.childNode).length && this.setAllClipboardNodeId(node.childNode);
    }
  }
};
</script>
<style lang="scss" scoped>
.btn {
  width: 32px;
  height: 32px;
  background: #406eff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  .icon {
    font-size: 18px;
    color: #fff;
  }
  &.active {
    box-shadow: 0px 4px 6px 0px #93a8e8;
    background: #1c4adb;
  }
}
.add-node-btn-box {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    margin: auto;
    width: 2px;
    height: 100%;
    background-color: #DDDDDD
  }
  .add-node-btn {
    user-select: none;
    padding: 20px 0 32px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    z-index: 2;
    flex-grow: 1
  }
}
.add-node-popover-item {
  height: 32px;
  background: #f9f9f9;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 4px;
  margin-bottom: 8px;
  cursor: pointer;
  &:last-child {
    margin-bottom: 0;
  }
  .add-node-item-wrap {
    width: 24px;
    height: 24px;
    background: #ffffff;
    border: 1px solid #dddddd;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    img {
      width: 16px;
      height: 16px;
    }
  }
  .label {
    margin-left: 8px;
    font-size: 14px;
    color: #333;
  }
}
</style>
<style lang="scss">
// .add-node-popover-body {
//   display: flex;
//   .add-node-popover-item {
//     flex: 1;
//   }
// }
</style>
